<template>
    <subBox v-loading="loading">
        <breadcrumb :title="'查看'"></breadcrumb>
        <div class="mt20 add">
            <div class="add white-block">
                <div class="box-th">
                    <div class="form-common clearfix">
                        <div class="form-item">
                            <div class="form-item-label">标题</div>
                            <div class="form-item-content">{{detail.requirementName}}</div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-label">类型</div>
                            <div class="form-item-content" v-if="detail.requirementType==1">数据需求</div>
                            <div class="form-item-content" v-if="detail.requirementType==2">问题反馈</div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-label">详细说明</div>
                            <div class="form-item-content">{{detail.instructionsDetail}}</div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-label">状态</div>
                            <div class="form-item-content" v-if="detail.requirementState==1">待回复</div>
                            <!--                            <div class="form-item-content" v-if="detail.requirementState==2">已流转</div>-->
                            <div class="form-item-content" v-if="detail.requirementState==2">已回复</div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-label">回复部门</div>
                            <div class="form-item-content">{{detail.replyDeptName}}</div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-label">回复内容</div>
                            <div class="form-item-content">{{detail.replyInfo}}</div>
                        </div>
                        <div class="line"></div>
                        <div class="form-item">
                            <div class="form-item-label">流转历史记录</div>
                            <div class="form-item-content">
                                <div class="content-box">
                                    <div v-for="item in flowHistories" :key="item.id">
                                        <div class="form-item" v-if="item.isStart === 1">
                                            <div class="form-item-labelHis">{{item.flowStartTime}}</div>
                                            <div class="form-item-content">{{item.flowInitateDeptName}}
                                                <el-tag class="submit" type="success" :hit="false">提交</el-tag>
                                            </div>
                                        </div>
                                        <div class="form-item flowBox"
                                             v-if="item.requirementState !== 3 && item.isStart === 0">
                                            <div class="form-item-labelHis">{{item.flowStartTime}}</div>
                                            <div class="form-item-content">
                                                <div class="form-item">
                                                    <div class="form-item-contentHis">
                                                        {{item.flowInitateDeptName}}
                                                        <el-tag class="submit" type="warning">流转至</el-tag>
                                                        {{item.flowReceiveDeptName}}
                                                    </div>
                                                    <div class="form-item">
                                                        <div class="form-item-labelHis flow-reason">流转原因</div>
                                                        <div class="form-item-contentHis">{{item.folwReason}}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-item" v-if="item.requirementState == 3">
                                            <div class="form-item-labelHis">{{item.flowStartTime}}</div>
                                            <div class="form-item-content">{{item.flowReceiveDeptName}}

                                                <el-tag class="submit">回复</el-tag>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </subBox>
</template>

<script>
    import subBox from '../../components/layout/layout-sub'
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'

    export default {
        data() {
            return {
                loading: false,
                id: '',
                detail: '',
                flowHistories: []
            }
        },
        mounted() {
            if (this.$route.query.id) this.id = this.$route.query.id
            this.getList()
        },
        methods: {
            getList() {
                this.loading = true
                this.$http.get('/requirementReply/getRequirementOrReplyDetail', {
                    requirementId: this.id
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        if (result.data.requirementReply !== null) {
                            this.detail = result.data.requirementReply
                        }
                        this.flowHistories = result.data.flowHistories
                    }
                })
            }
        },
        components: {
            subBox,
            breadcrumb,
            tableExample
        }
    }
</script>

<style scoped lang="less">
    .line {
        width: 100%;
        height: 1px;
        background-color: #ccc;
        margin: 40px 0;
    }

    .content-box {
        /*height: 80px;*/
        background-color: #f9f9f9;
        padding: 20px;
        padding-left: 40px;
    }

    .form-item-labelHis {
        float: left;
        padding-right: 30px;
        line-height: 30px;
        text-align: right;
        color: #999;
    }

    .flow-reason {
        color: #333;
    }

    .flowBox {
        /*line-height: 32px;*/
        margin: 5px 0;
    }

    .form-common .form-item {
        margin-bottom: 5px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .form-item-contentHis {
        line-height: 30px;
        /*margin-left: 100px;*/

        span {
            padding: 0 20px;
        }
    }

    .submit {
        margin: 0 20px;
    }

    .reply {
        padding: 0 20px;
    }

    .el-tag {
        border: none;
    }
</style>
